<template>
	<view>
		<view class="writebox">
			<view class="titlebox">
				微信交易保障
				<image src="../static/off.png" @click="close()"></image>
			</view>
			<view class="listbox" v-for="(item,index) in list" :key="index">
				<view class="imgbox">
					<image :src="item.img"></image>
				</view>
				<view class="illustrate">
					<view>{{item.title}}</view>
					<view class="tipbox">{{item.tip}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"protection",
		data() {
			return {
				list:[{img:'../static/zheng.png',title:'商家认证',tip:'商家经考核认证，服务有保障。'},
				{img:'../static/zheng1.png',title:'交易监管',tip:'交易过程有监管，购物更安心。'},
				{img:'../static/zheng2.png',title:'争议处理',tip:'微信将介入处理你与商家的交易争议，保障权益。'},
				{img:'../static/zheng3.png',title:'无忧售后',tip:'商家48小时内处理退款申请。'},
				{img:'../static/zheng4.png',title:'快速发货',tip:'商家48小时内处理发货。'}]
			};
		},
		methods:{
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.writebox{
		background-color: #FFF;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		.titlebox{
			height: 112rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: solid 2rpx #DBDBDB;
			width: 100%;
			position: relative;
			image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				position: absolute;
				right: 30rpx;
			}
		}
		.listbox{
			display: flex;
			align-items: center;
			height: 170rpx;
			.imgbox{
				width: 128rpx;
				text-align: center;
				image{
					width: 68rpx;
					height: 73rpx;
				}
			}
			.illustrate{
				font-size: 32rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #222222;
				line-height: 55rpx;
				.tipbox{
					font-size: 22rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #888888;
				}
			}
		}
	}

</style>